
// {bem_b,bem_e,VueAndNvueStyleAttr}
@use  './mixin/mixins.scss' as *;
@use './mixin/function.scss' as *;
@import 'common/index.scss';

$e-code-input-cursor-width: 1px;
$e-code-input-cursor-height: 40%;
$e-code-input-cursor-animation-duration: 1s;
$e-code-input-cursor-animation-name: e-cursor-flicker;

@include bem_b(code-input) {
	@include flex;
	position: relative;
	overflow: hidden;

	@include bem_e(item) {
		@include flex;
		justify-content: center;
		align-items: center;
		position: relative;

		&__text {
			font-size: 15px;
			@include VueAndNvueStyleAttr('color','text-color', 'regular');
		}

		&__dot {
			width: 7px;
			height: 7px;
			border-radius: 100px;
			@include VueAndNvueStyleAttr('background-color','text-color', 'regular');
		}

		&__line {
			position: absolute;
			bottom: 0;
			height: 4px;
			border-radius: 100px;
			width: 40px;
			@include VueAndNvueStyleAttr('background-color','text-color', 'regular');
		}

		/* #ifndef APP-PLUS */
		&__cursor {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: $e-code-input-cursor-width;
			height: $e-code-input-cursor-height;
			animation: $e-code-input-cursor-animation-duration e-cursor-flicker infinite;
		}

		/* #endif */
	}

	@include bem_e(input) {
		// 之所以需要input输入框，是因为有它才能唤起键盘
		// 这里将它设置为两倍的屏幕宽度，再将左边的一半移出屏幕，为了不让用户看到输入的内容
		position: absolute;
		left: -750rpx;
		width: 1500rpx;
		top: 0;
		background-color: transparent;
		text-align: left;
	}
}

/* #ifndef APP-PLUS */
@keyframes e-cursor-flicker {
	0% {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

/* #endif */
